<template>
  <div class="d">
    <div class="d1"><img class="img1" src="../assets/maoyandy.png"></div>
    <div class="d2"></div>
    <div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="margin-left: 250px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" type="text"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="senderPhone">
          <el-input v-model="ruleForm.senderPhone" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="checkcode">
          <el-input v-model="ruleForm.checkcode" type="text" :maxlength="4"></el-input>
        </el-form-item>
        <div class="checkcode"><button class="codebtn" @click="getcode()" :disabled="isDisabled">获取验证码</button></div>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleForm)"
            >同意以下协议并注册</el-button
          >
          <el-button @click="resetForm(ruleForm)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="xy">《美团用户服务协议》《美团隐私政策》</div>
    <div class="xy1"><hr></div>
    <div class="bottom1">©meituan.com  京ICP证070791号  京公网安备11010502025545号</div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else  {
        callback();
      }
    };
    return {
      isDisabled: false,
      ruleForm: {
        pass: "",
        checkPass: "",
        senderPhone: "",
        username: "",
        checkcode: ""
      },
      rules: {
        username: [
          { required: true, validator: validUsername, trigger: "blur" },
        ],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        senderPhone: [{ validator: checkPhone, trigger: "blur" }],
      },
    };
  },
  methods: {
    getcode: function(){
      this.isDisabled=true
      setTimeout(() => {
        this.isDisabled=false
      }, 60000);//60秒后获取
      axios.get("api/user/getcode").then(res=>{
        console.log("生成验证码")
      })
    },
    submitForm(data) {
      console.log(data)
      // alert(11)
      axios.get("api/user/saveOne?uname="+data.username+"&upass="+data.pass+"&utel="+data.senderPhone+"&code="+data.checkcode).then(res=>{
        console.log(res.data)
        if(res.data.code==="1"){
          alert("注册成功")
          this.$router.push("login")
        }else{
          alert("注册失败")
          this.$router.push("regist")
        }
      })
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style>
.el-input__inner {
  width: 30%;
  margin-left: -622px;
}
.el-button--primary {
  margin-left: -618px;
}
.el-form-item__content {
  width: 940px;
}
.el-form-item--feedback .el-input__validateIcon {
  margin-right: 590px;
}
.el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  display: none;
}
.img1 {
    width: 115px;
    height: 40px;
    margin-left: -950px;
    margin-top: 10px;
}
.d {
  /* border: solid 1px red; */
  margin-left: -140px;
}
.d1 {
  /* background-color: aqua; */
  width: 100%;
  height: 60px;
  border-bottom: red solid 3px;
}
.d2 {
  height: 30px;
}
.xy {
  margin-left: -515px;
  color: red;
}
.xy1{
  margin-top: 20px;
}
.bottom1{
  margin-top: 10px;
  color: gray;
}
.checkcode{
    margin-left: -780px;
    padding-bottom: 15px;
}
.codebtn{
      color: #422e2e;
    background-color: orange;
}
</style>